<template>
  <div class="third">
    <!--  1-入驻申请，2-线上考核，3-考核改卷，4-预审通过，5-签约，6-通过，7-冻结，8-拉黑  erbrokerData-->
    <!-- <div class="title">
      <a href="#" style="width: 100px; text-align: center;color:#00f">
        {{ ['','入驻申请','线上考核','考核改卷','预审通过','签约','通过','冻结','拉黑'][erbrokerData.state] }}
      </a>
    </div> -->
    <div class="content" style="padding: 20px 0">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="入驻申请" name="1">
          <template slot="title">
            入驻申请
            <!--  0-进行中，1-已提交，2-未通过，3-不符合平台要求，4-通过 -->
            <span class="right-info"> {{ ['进行中','已提交','未通过','不符合平台要求','通过'][erbrokerData.enterApplyState] }}</span>
          </template>
          <div class="realContent">
            <p class="realTitle">实名验证</p>
            <div class="realbox">
              <ul>
                <li>姓名 {{ erbrokerData.realName }}</li>
                <li>性别 {{ erbrokerData.sex==='1'?'男':'女' }}</li>
                <li>名族 {{ erbrokerData.nation }}</li>
                <li>身份证号码 {{ erbrokerData.idCardNo }}</li>
                <li>出生日期 {{ erbrokerData.extBirthday }}</li>
              </ul>
              <ul>
                <li>住址 {{ erbrokerData.extAddress }}</li>
                <li>身份证有效期 {{ erbrokerData.extStartExpireDate }}-{{ erbrokerData.extEndExpireDate }}</li>
              </ul>
              <ul>
                <li>
                  身份证正面
                  <el-image
                    v-if="erbrokerData.idCardFront"
                    class="clickImg"
                    style="width: 200px; height: 100px;"
                    :preview-src-list="[erbrokerData.idCardFront]"
                    :src="erbrokerData.idCardFront"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                </li>
              </ul>
            </div>
          </div>
          <div class="realContent">
            <p class="realTitle">基础资料</p>
            <div class="realbox">
              <ul>
                <li><b>联系信息</b></li>
              </ul>
              <ul style="border-bottom: 1px solid #ccc">
                <li>联系电话 {{ erbrokerData.mobile||'暂无' }}</li>
                <li>电子邮箱 {{ erbrokerData.contactMail || '暂无' }}</li>
                <li>联系地址 {{ erbrokerData.contactAddress||'暂无' }}</li>
              </ul>
              <ul>
                <li><b>教育经历</b></li>
              </ul>
              <ul>
                <li>{{ erbrokerData.schoolName }} </li>
                <li>{{ ['初中及以下', '中专/中技', '高中', '大专', '本科', '硕士', '博士'][erbrokerData.eduType] }}</li>
                <li>{{ erbrokerData.majorName }}</li>
                <li>{{ erbrokerData.startTime }}-{{ erbrokerData.endTime }}</li>
              </ul>
              <ul style="border-bottom: 1px solid #ccc">
                <li>
                  学历证书
                  <el-image
                    v-if="erbrokerData.imgUrl"
                    style="width: 150px; height: 100px"
                    :src="erbrokerData.imgUrl"
                    :preview-src-list="[erbrokerData.imgUrl]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                </li>
              </ul>
              <ul>
                <li><b>工作履历</b></li>
              </ul>
              <ul>
                <li>{{ erbrokerData.companyName }}</li>
                <li>{{ erbrokerData.positionName }}</li>

                <!-- <li>2009-155445</li> -->
              </ul>
              <ul style="border-bottom: 1px solid #ccc">
                <li>名片照片</li>
                <!-- <img class="clickImg" data-img="{{businessCardImgUrl}}" style="width: 100px;" src="{{businessCardImgUrl}}"> -->
                <el-image
                  v-if="erbrokerData.businessCardImgUrl"
                  style="width: 100px; height: 100px"
                  :src="[erbrokerData.businessCardImgUrl]"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </ul>
              <ul>
                <li>证件号 {{ erbrokerData.no || '暂无' }}</li>
                <li>准驾车型 {{ erbrokerData.driveMotorcycleType || '暂无' }}</li>
                <li>初次领证日期 {{ erbrokerData.holdCardDate }}</li>
                <li>有效时间 {{ erbrokerData.licenceStartExpireDate }}-{{ erbrokerData.licenceEndExpireDate }}</li>
              </ul>
              <ul>
                <li>
                  驾驶证正面
                  <el-image
                    v-if="erbrokerData.drivingImgUrl"
                    style="width: 100px; height: 100px"
                    :preview-src-list="[erbrokerData.drivingImgUrl]"
                    :src="erbrokerData.drivingImgUrl"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>

                </li>
              </ul>
            </div>
            <div class="realContent" style="padding-left:10px">
              <p class="realTitle">服务范围</p>
              <div class="realbox">
                <ul>
                  <li>{{ erbrokerData.provinceName }} {{ erbrokerData.cityName }} {{ erbrokerData.areaName }}</li>
                </ul>
              </div>
            </div>
            <div class="realContent" style="padding-left:10px">
              <p class="realTitle">风控</p>
              <div class="realbox">
                <ul>
                  <li>同盾总分 {{ erbrokerData.finalScore || '暂无' }}</li>
                  <li>同盾建议 {{ erbrokerData.finalDecision==='erbrokerData'||'erbrokerData'?'通过':'拒绝' || '暂无' }}</li>
                </ul>
              </div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="线上考核" name="2">
          <template slot="title">
            线上考核
            <span v-if="erbrokerData.skillExamineState===3 || erbrokerData.operateExamineState===3" class="right-info">
              不通过
            </span>
            <span v-else-if="erbrokerData.skillExamineState===1 || erbrokerData.operateExamineState===1" class="right-info">
              进行中
            </span>
            <span v-else-if="erbrokerData.skillExamineState===4 || erbrokerData.operateExamineState===2" class="right-info">
              通过
            </span>
          </template>
          <div class="realContent">
            <p class="realTitle">理论考核</p>
            <div class="realbox">
              <ul>
                <li>{{ erbrokerData.score || 0 }} 分</li>
                <li>通过时间 {{ erbrokerData.skillExamineTime || '暂无' }}</li>
                <li>状态 {{ ['未验证','进行中', '已提交','未通过','通过'][erbrokerData.skillExamineState] }}</li>
              </ul>
            </div>
          </div>
          <div class="realContent">
            <p class="realTitle">实操考核</p>
            <div class="realbox">
              <ul>
                <li v-if="erbrokerData.operateExamineTime">通过时间 {{ erbrokerData.operateExamineTime | parseTime }}</li>
                <li>状态 {{ ['未开始','待批改','通过','不通过'][erbrokerData.operateExamineState] }}</li>
                <!--<li>答卷详情 <a href='/pages/brokerManage/check.html?id=121&status=2' name='search' style="width: 100px;text-align: center;">查看答卷 </a></li>-->
                <!--<li>答卷详情 <a href='/vw/brokerManage/check?id=121&status=2' name='search' style="width: 100px;text-align: center;">查看答卷 </a></li>-->
                <li>
                  答卷详情
                  <a
                    v-if="erbrokerData.operateExamineState!=0"
                    name="search"
                    style="width: 100px; text-align: center;color:#00f"
                    @click="toChecked"
                  >查看答卷
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="签约" name="3">
          <template slot="title">
            签约
            <span class="right-info">{{ ['未验证','进行中','已提交','未通过','通过'][erbrokerData.signState] }}</span>
          </template>
          <div class="realContent">
            <p class="realTitle">签约</p>
            <div class="realbox">
              <ul>
                <li>状态 {{ ['未签约','已签约'][erbrokerData.brokerSignState] || '暂无' }}</li>
                <li v-if="erbrokerData.brokerSignTime">签约时间 {{ erbrokerData.brokerSignTime | parseTime }}</li>
                <li>
                  签约合同
                  <a
                    :href="erbrokerData.downloadUrl"
                    style="color:#00f"
                  >合同签约.pdf</a>
                </li>
              </ul>
            </div>
          </div>
          <div v-if="false" class="realContent">
            <p class="realTitle">临时税务登记</p>
            <p />
            <div class="realbox">
              <ul>
                <li>状态 {{ ['未签约','已签约'][erbrokerData.registerTaxState] || '暂无' }}</li>
                <li v-if="erbrokerData.brokerSignTime">完成注册时间 {{ erbrokerData.brokerSignTime | parseTime }}</li>
              </ul>
              <ul>
                <li>临登税务号 {{ erbrokerData.tin || '暂无' }}</li>
                <li>临登有效期 {{ erbrokerData.startDate }}-{{ erbrokerData.endDate }}</li>
              </ul>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['0'],
      statisticsInviteInfo: {},
      loading: false,
      list: [],
      total: 0,
      userInfo: {},
      tableKey: '1',
      erbrokerData: {},
      fit: 1

    }
  },
  created() {
    this.$get(`/web/broker/get/brokerAuthInfo?userId=${this.$route.query.id}`).then((res) => {
      // console.log(res)
      if (res.data.code === '0') {
        this.erbrokerData = res.data.data
        this.$emit('state', this.erbrokerData || 0)
      }
    })
    console.log(this.$route.query.invite)
    if (Number(this.$route.query.invite) !== 0) {
      this.$get(`/web/user/get/statisticsInvite?userId=${this.$route.query.id}`).then((res) => {
        if (res.data.code === '0') {
          this.statisticsInviteInfo = res.data.data
        }
      })
    }
  },
  methods: {
    toMore() {
      this.$router.push({
        path: '/valuation/index',
        query: {
          userNameOrMobile: this.userInfo.mobile
        }
      })
    },
    toChecked() {
      this.$router.push({
        name: 'check',
        query: {
          id: this.$route.query.id,
          status: this.erbrokerData.operateExamineState
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

/deep/ .el-image{
  overflow: inherit;
}
.el-collapse-item {
  position: relative;
  .right-info {
    position: absolute;
    right: 40px;
    top: 0px;
  }
}
/deep/ .el-collapse-item__header {
  padding-left: 40px;
}
.realContent {
  padding-left: 40px;
}
.topTips {
  height: 50px;
  line-height: 50px;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border-bottom: 1px solid #ccc;
}
ul li {
  list-style: none;
}
.container {
  background: #fff;
  border: 1px solid #dfe6ec;
  margin: 20px;
  margin-bottom: 100px;
  /* padding-left: 20px; */
}

.container .title {
  font-size: 20px;
  font-weight: bold;
  /* margin-left: 20px; */
  text-indent: 2rem;
  padding: 10px 0;
  border-bottom: 1px solid #dfe6ec;
}

.container .content {
  border-bottom: 1px solid #dfe6ec;
  position: relative;
}

.container .content ul {
  display: flex;
  text-indent: 2rem;
  padding: 10px 0;
}

.container .content ul li {
  width: 400px;
}
.container .content .item p {
  font-size: 15px;
  text-align: center;
  width: 238px;
}

.container .content .img {
  width: 150px;
  height: 120px;
  /* background: #ccc; */
  margin-right: 20px;
}

.container .content .img img {
  width: 100%;
  height: 100%;
}

// .container .content .item p {
//   font-size: 15px;
//   text-align: center;
//   width: 181px;
// }

.content .QrcodeImg {
  width: 80px;
  height: 80px;
  margin: 8px auto;
  border: 1px solid #ccc;
}

.content .QrcodeImg img {
  width: 100%;
  height: 100%;
}

.content .inviteQrcode {
  text-align: center;
  width: 200px;
  height: 114px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.mytable .title {
  font-size: 20px;
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
}
.mytable .title .more {
  font-size: 15px;
  font-weight: normal;
  color: #ccc;
  margin-right: 20px;
  cursor: pointer;
}
.mytable .title #total {
  color: #000;
  margin-left: 20px;
}
.realTitle{
  // border-bottom: 1px solid #ccc;
  font-weight: 600;
}
</style>
